<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="//static/css/bootstrap.min.css">
    <link rel="stylesheet" href="//static/css/index_s.css">
    <link rel="stylesheet" href="//static/css/style.css">
    <link rel="stylesheet" href="//static/css/font-awesome.min.css">
    <link rel="stylesheet" href="//static/css/public.css">
    <script type="text/javascript" src="//static/js/echarts.min.js"></script>
    <script src="//static/js/vue.min.js"></script>
    <script src="//static/js/jquery.min.js?v=2.1.4"></script>
    <title>Document</title>
</head>
<style>
    .back-a {
        color: #333;
    }

    .back-a:hover {
        color: #333;
        text-decoration: none;
    }

    .top-chart {
        width: 100%;
        height: 300px;
        margin: 0 auto;
    }

    .select {
        display: flex;
        height: 45px;
        width: 600px;
        margin: 0 auto;
    }

    .select-table {
        flex: 1;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background-color: #E0E2EB;
        color: #666;
        cursor: pointer;
        font-weight: bold;
        border:1px solid #999;
    }
    .select-tableActive{
        background: #FFFFFF;
        color: #336699;
    }
</style>

<body style="background-color: #fff">
<div>
    <!--头部带返回功能-->
    <div class="content-title border-bottom">
        <a class="back-a" href="javascript:history.go(-1)">
            <span class="fa" style="float: left;font-size: 30px;margin: 3px 3px 0 0;">&#xf104;</span>
            back
        </a>
    </div>
    <!--上部分Char表-->
    <div class="top-chart" id="top-chart"></div>
    <!--点击选择状态menu-->
    <div class="select" style="margin-top: 20px;">
        <div class="select-table select-tableActive">
            日汇总
        </div>
        <div class="select-table">
            月汇总
        </div>
        <div class="select-table">
            年汇总
        </div>
    </div>
    <!--下部分Char表-->
    <div class="top-chart" id="bottom-chart"></div>
</div>
<script>
    var selectDom = document.querySelector(".select").getElementsByTagName("div");
    for (var i = 0; i < selectDom.length; i++) {
        selectDom[i].addEventListener("click", function () {
            for(var j = 0; j < selectDom.length; j++){
                selectDom[j].classList.remove("select-tableActive");
            }
            this.classList.add("select-tableActive");
            if (this.innerText == "日汇总") {
                bottom_chart.setOption(changeContent_day, true)
            } else if (this.innerText == "月汇总") {
                bottom_chart.setOption(changeContent_monthy, true)
            } else {
                bottom_chart.setOption(changeContent_year, true)
            }
        }, false)
    }
    //上部分charts 实时监控
    var dom = document.getElementById("top-chart");
    var myChart = echarts.init(dom);
    option = null;
    function randomData() {
        now = new Date(+now + 60*1000);
        //下一个点获取时添加的时间设置
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(),
            value: [
                now,
                Math.round(value)
            ]
        }
    }
    var data = [];
    var now = +new Date();
    var value = Math.random() * 1000;
    for (var i = 0; i < 24*60; i++) {
        //初始化有多少个点
        data.push(randomData());
    }
    option = {
        title: {
            text: '实时数据'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getHours() + ':'  + date.getMinutes() +" "+date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                //数据点现实的格式数据
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
        }]
    };
    setInterval(function () {
        for (var i = 0; i < 5; i++) {
            data.shift();
            data.push(randomData());
        }
        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }, 1000);
//    setInterval(function () {
//        data.shift();  //数据不积累，来一个点，则不现实最后一个点，注释则积累现实
//        data.push(randomData());
//        myChart.setOption({
//            series: [{
//                data: data
//            }]
//        });
//    }, 1000);
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    //下部分历史数据charts
    var bottom_chart = echarts.init(document.getElementById('bottom-chart'));
    changeContent_day = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data:['最高值','最低值','平均值']
        },
        xAxis: [
            {
                type: 'category',
                data: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '最高值',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '最低值',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name:'最高值',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,5.1]
            },
            {
                name:'最低值',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,5.1]
            },
            {
                name:'平均值',
                type:'line',
                yAxisIndex: 1,
                data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,0.2]
            }
        ]
    };
    changeContent_year = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data:['最高值','最低值','平均值']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '最高值',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '最低值',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name:'最高值',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name:'最低值',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name:'平均值',
                type:'line',
                yAxisIndex: 1,
                data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };
    var newArr = [];
    for(var i=1;i<30;i++){
        newArr.push(i+"号")
    }
    changeContent_monthy = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data:['最高值','最低值','平均值']
        },
        xAxis: [
            {
                type: 'category',
                data:newArr,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '最高值',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '最低值',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name:'最高值',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,5.1, 20.0, 6.4, 3.3,5.1]
            },
            {
                name:'最低值',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,5.1, 20.0, 6.4, 3.3,5.1]
            },
            {
                name:'平均值',
                type:'line',
                yAxisIndex: 1,
                data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,4.2, 5.5, 4.0, 6.2,.2]
            }
        ]
    };
    bottom_chart.setOption(changeContent_day);
</script>
</body>
</html>